<template>
  <el-dialog v-model="dialogVisible" draggable title="上传失败" width="800px" :close-on-click-modal="false" >
    <div class="upload_fail_tip" >上传兑换码失败，请重新上传，具体失败原因及源数据如下：</div>
    <ZwTable ref="tableRef" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams"  :fetch-api="fetchApi()" tabH="560px" ></ZwTable>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from 'vue'
import ZwTable from '@/components/zw/table/Table'

const props = withDefaults(defineProps<Props>(), {
  data: () => ([]),
  modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const tableRef = ref()
const state = reactive({
  searchParams: {
    page: 1,
    page_size: 15
  },
})

const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

watch(() => props.modelValue, (val: any) => {
  if (val) {
    tableRef.value?.reload()
  }
})


const tableOption = computed(() => {
  return [
    {
      prop: 'line_num',
      label: '行号',
      width: 130,
      showOverflowTooltip: true
    },
    {
      prop: 'error_msg',
      label: '错误说明',
      width: 280,
      showOverflowTooltip: true
    },
    {
      prop: 'original_data',
      label: '源数据',
      showOverflowTooltip: true
    }
  ]
})


const data = reactive<RowOption[]>([])

// 自定义表格查询接口
const fetchApi = () => {
  return (params: any) => {
    return new Promise(async (resolve, reject) => {
      try {
        const { page, page_size } = params
        data.splice(0)
        data.push(...props.data.slice((page * page_size - page_size), page * page_size))
        resolve({ data, total: props.data.length })
      } catch (err) {
        resolve({data: [], total: 0})
        reject(err)
      }
    })
  }
}


const getRowKey = (row: RowOption) => row.line_num

interface RowOption {
  line_num: number | string,
  error_msg: string,
  original_data: string
}
interface Props {
  data: any[],
  modelValue: boolean
}

</script>
<style lang="scss" scoped >
.upload_fail_tip {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #33302D;
  margin-top: 12px;
  margin-bottom: 24px;
}
.zw-table :deep(.el-table) {
  min-width: 360px;
  height: 53vh;
}
</style>